<!--
 * @Date: 2020-07-11 10:25:56
 * @LastEditors: leehave
 * @LastEditTime: 2020-07-11 14:42:08
--> 
<template>
  <div class="charge-prev charging_prepare">
    <div class="progress_box">
      <canvas id="canvasProgressbg" class="progress_bg" ref="canvasProgressbg"></canvas>
      <canvas id="canvasProgress" class="progress_canvas" ref="canvasProgress"></canvas>
      <div class="progress_text">
        <div class="progress_info">{{progress_txt}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 50,
      num: 0,
      speed: 20,
      timer: null,
      countTimer: 0,
      count: 0,
      progress_txt: "设备启动中，请稍后"
    };
  },
  computed: {},
  mounted() {
    var that = this;
    this.drawProgressbg();
    this.countInterval();
    this.timer = setInterval(function() {
      // todo 异步获取该订单状态 定时获取 查询充电状态后直接跳转至充电状态页面
      that.num += 1;
      that.value += 1;
      if (that.num > 2) {
        clearInterval(that.timer);
        that.timer = null;
        that.toChargePrepare();
      }
    }, 1e3);
  },
  created() {},
  watch: {},
  methods: {
    toChargePrepare() {
      this.$router.push({
        path: "/home/charging"
      });
    },
    drawProgressbg() {
      let canvas = document.getElementById("canvasProgressbg");
      let ctx = canvas.getContext("2d");
      canvas.width = 500;
      canvas.height = 500;
      ctx.lineWidth = 1;
      // // 设置圆环的宽度
      ctx.strokeStyle = "#409eff";
      // // 设置圆环的颜色
      ctx.setLineCap = "round";
      // // 设置圆环端点的形状
      ctx.beginPath();
      // //开始一个新的路径
      ctx.arc(canvas.width / 2, 120, 120, 0, Math.PI * 2, true);
      // //设置一个原点(110,110)，半径为100的圆的路径到当前路径
      ctx.stroke();
      // //对当前路径进行描边
    },

    drawCircle(step) {
      let canvas = document.getElementById("canvasProgress");
      if(canvas){
        let context = canvas.getContext("2d");
        canvas.width = 500;
        canvas.height = 500;
        context.lineWidth = 5;
        context.strokeStyle = "#409eff";
        context.setLineCap = "round";
        context.beginPath();
        // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
        context.arc(
          canvas.width / 2,
          120,
          120,
          -Math.PI / 2,
          step * Math.PI - Math.PI / 2,
          false
        );
        context.stroke();
      }
    },
    /**
     * 环形进度条定时器
     */
    countInterval() {
      // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
      let that = this;
      console.log(this.count,'count');
      this.countTimer = setInterval(function() {
        if (that.count <= 1e3) {
          /* 绘制彩色圆环进度条  
        注意此处 传参 step 取值范围是0到2，
        所以 计数器 最大值 1000 对应 2 做处理，计数器count=1000的时候step=2
        */
          that.drawCircle(that.count / (1e3 / 2));
          that.count++;
        } else {
          that.progress_txt = "打开设备成功";
          clearInterval(that.countTimer);
          clearInterval(that.timer);
          that.timer = null;
        }
      }, 4);
    }
  },
  components: {},
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
    this.count = 0
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
    this.count = 1e3+1
  }
};
</script>

<style scoped lang="less">
.progress_box {
  position: relative;
  height: 100%;
}
.progress_bg,
.progress_canvas {
  position: absolute;
  top: 200px;
  transform: translateX(-50%);
  left: 50%;
}
.progress_text {
  position: absolute;
  top: 320px;
  transform: translateX(-50%);
  left: 50%;
}
</style>
